<template>
    <div>
        <el-card>
            <div>
                <h4 class="topCardBtn">基本信息</h4>
                <el-row :gutter="20" style="align-items: center" v-loading="loading">
                    <el-col :span="10">
                        选择项目
                        <el-select
                            style="width: 80%"
                            placeholder="请选择项目"
                            v-model="projectName"
                            @change="handleSelectProject"
                        >
                            <el-option
                                v-for="(project, idx) in projectList"
                                :key="idx"
                                :label="project.project_name_"
                                :value="project"
                            ></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="7">
                        选择施工段
                        <el-select
                            style="width: 80%"
                            placeholder="请选择选择施工段"
                            v-model="construction"
                            @change="handleSelectConstruction"
                        >
                            <el-option
                                v-for="(construction, idx) in constructionList"
                                :key="idx"
                                :label="construction.constructionIndex + '-' + construction.constructionName"
                                :value="construction"
                            ></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="3">
                        <el-button type="primary" size="mini" @click="getData">查询</el-button>
                    </el-col>
                </el-row>
            </div>
        </el-card>
        <!-- 进度表 -->
        <el-card>
            <el-row :gutter="20">
                <el-col :span="12">
                    <h4 class="topCardBtn">进度表</h4>
                </el-col>
                <el-col :span="12">
                    <div style="display:flex;justify-content: space-around;">
                        <div class="color-block-container">
                            整体进度
                            <div class="color-block-all"></div>
                        </div>
                        <div class="color-block-container">
                            进行中
                            <div class="color-block-ongoing"></div>
                        </div>
                        <div class="color-block-container">
                            延期
                            <div class="color-block-delay"></div>
                        </div>
                        <div class="color-block-container">
                            已完成
                            <div class="color-block-completed"></div>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20" style="height: 50rem">
                <el-col :span="12">
                    <el-table :data="scheduleData" border>
                        <el-table-column label="序号" prop="index" width="50" align="center"></el-table-column>
                        <el-table-column label="节点名称" prop="nodeName" width="110" align="center"></el-table-column>
                        <el-table-column label="开始时间" align="center" prop="startTime"></el-table-column>
                        <el-table-column label="结束时间" align="center" prop="endTime"></el-table-column>
                        <el-table-column label="工期" prop="duration" width="80" align="center"></el-table-column>
                    </el-table>
                </el-col>
                <el-col :span="12">
                    <gstc :config="config" :key="key1" />
                </el-col>
            </el-row>
        </el-card>
        <!-- 任务列表 -->
        <el-card>
            <h4 class="topCardBtn">任务列表</h4>
            <el-row :gutter="20" style="height: 50rem">
                <el-col :span="12">
                    <el-table :data="jobData" border>
                        <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
                        <el-table-column label="任务名称" prop="jobName" width="130" align="center"></el-table-column>
                        <el-table-column label="开始时间" align="center" width="200" prop="startTime"></el-table-column>
                        <el-table-column label="结束时间" align="center" width="200" prop="endTime"></el-table-column>
                        <el-table-column label="工期" prop="duration" width="80" align="center"></el-table-column>
                        <el-table-column
                            label="工种"
                            prop="userOrTypeWork"
                            width="130"
                            align="center"
                        ></el-table-column>
                        <el-table-column label="人员" width="200" align="center" prop="user"></el-table-column>
                        <el-table-column label="人数" width="130" align="center" prop="peopleNumber"></el-table-column>
                    </el-table>
                </el-col>
                <el-col :span="12">
                    <gstc1 :config="configjob" :key="key2" />
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
import GSTCComponent, { GSTC } from '../../components/GSTC.vue';
import GSTCComponent1, { GSTC as GSTC1 } from '../../components/GSTC1.vue';
import gstcConfig from '../../utils/gstcConfig'

const GSTCID = GSTC.api.GSTCID;
const GSTCID1 = GSTC1.api.GSTCID;
let subs = [];
export default {
    components: {
        gstc: GSTCComponent,
        gstc1: GSTCComponent1,
    },
    data() {
        return {
            config: '', // 甘特图配置
            configjob: '', // 甘特图配置
            loading: false,
            projectName: '',
            projectId: '',
            projectNo: '',
            projectList: [],
            scheduleData: [],
            jobData: [],
            jobStartTime: '',
            jobEndTime: '',
            key1: '',
            key2: '',
            construction: '',
        }
    },
    created() {
        this.key1 = new Date().toString()
        this.key2 = new Date().toString()
        this.setGSTC()
        this.setGSTCJob()
        // 加载太慢，暂时注释
        this.getProjectList()
    },
    methods: {
        // 查询项目列表
        getProjectList() {
            this.loading = true
            let param = { curPage: 1, pageSize: 1000000, params: {} }
            this.$axios.post(`/form/formCustSql/view/list_ppcgSecondaryScheduleMstGetProject`, param).then(res => {
                if (res.isOk) {
                    this.projectList = res.data.list
                    this.loading = false
                } else {
                    this.$ElMessage({
                        message: res.msg,
                        type: 'error',
                    })
                }
            })
        },
        // 选择项目
        handleSelectProject(item) {
            this.projectId = item.project_id_
            this.projectName = item.project_name_
            this.projectNo = item.project_no_
            this.getProjectUserDataIdByProId()
        },
        // 查询项目成员主表id
        getProjectUserDataIdByProId() {
            const param = { curPage: 1, pageSize: 10, params: { queryData: [{ name: 'projectNo', con: "like", val: this.projectNo }] } }
            this.$axios.post(`/form/formCustSql/view/list_projectVoProjectUserMst`, param).then(res => {
                if (res.isOk) {
                    if (res.data.list.length > 0)
                        this.getProjectUserDataByMasterId(res.data.list[0].id_)
                } else {
                    this.$ElMessage({
                        message: res.msg,
                        type: 'error',
                    })
                }
            })
        },
        // 根据项目成员主表id查询字表详情
        getProjectUserDataByMasterId(id) {
            this.$axios.post(`/form/formDefData/getData?key=projectVoProjectUser&id=${id}&sql=`,).then(res => {
                if (res.isOk) {
                    this.constructionList = res.data.data.projectVoProjectUser.projectVoProjectUserConstructionList
                } else {
                    this.$ElMessage({
                        message: res.msg,
                        type: 'error',
                    })
                }
            })
        },
        handleSelectConstruction(item) {
            this.construction = item.constructionIndex + '-' + item.constructionName
            this.constructionId = item.id
            this.constructionIndex = item.constructionIndex
            this.constructionName = item.constructionName
            this.projectUserList = item.projectVoProjectUserDtlList
        },
        getData() {
            if (!this.projectNo) {
                this.$ElMessage({
                    message: '请选择项目',
                    type: 'warning',
                })
                return
            }
            this.scheduleData = []
            this.jobData = []
            this.jobStartTime = ''
            this.jobEndTime = ''
            this.key1 = new Date().toString()
            this.key2 = new Date().toString()
            this.setGSTC()
            this.setGSTCJob()
            let param = { curPage: 1, pageSize: 10, params: { queryData: [{ name: "construction_id_", con: "=", val: this.constructionId }] } }
            this.$axios.post(`/form/formCustSql/view/list_ppcgSecondaryScheduleMst`, param).then(res => {
                if (res.isOk) {
                    let newData = res.data.list
                    if (newData.length > 0)
                        this.getDataItem(newData[0].id_)
                } else {
                    this.$ElMessage({
                        message: res.msg,
                        type: 'error',
                    })
                }
            })
        },
        // 根据进度表主键id查询详情
        getDataItem(id) {
            this.$axios.post(`/form/formDefData/getData?key=ppcgSecondaryScheduleMst&id=${id}&sql=`).then(res => {
                if (res.isOk) {
                    this.$ElMessage({
                        message: '查询成功',
                        type: 'success',
                    })
                    let newData = res.data.data.ppcgSecondaryScheduleMst
                    this.scheduleData = newData.ppcgSecondaryScheduleDtlList
                    this.key1 = new Date().toString()
                    this.key2 = new Date().toString()
                    this.setGSTC()
                    let jobData = []
                    newData.ppcgSecondaryScheduleJobMstList.map(mst => {
                        if (mst.ppcgSecondaryScheduleJobDtlList)
                            jobData.push(...mst.ppcgSecondaryScheduleJobDtlList)
                    })
                    jobData.map(d => {
                        if (!this.jobStartTime) {
                            this.jobStartTime = d.startTime
                        }
                        let diffSTime = this.$moment(d.startTime).diff(this.jobStartTime, 'day')
                        if (diffSTime < 0) {
                            this.jobStartTime = d.startTime
                        }
                        if (!this.jobEndTime) {
                            this.jobEndTime = d.endTime
                        }
                        let diffETime = this.$moment(d.endTime).diff(this.jobEndTime, 'day')
                        if (diffETime > 0) {
                            this.jobEndTime = d.endTime
                        }
                        d.duration = (this.$moment(d.endTime).diff(d.startTime, 'day')) + 1
                    })
                    this.jobData = jobData
                    this.setGSTCJob()
                } else {
                    this.$ElMessage({
                        message: res.msg,
                        type: 'error',
                    })
                }
            })
        },
        // 甘特图设置开始，不知道为什么这么写，感觉没什么用，但是又不敢删除
        onState(state1) {
            this.state1 = state1;
            subs.push(
                state1.subscribe(`config.chart.items.${GSTCID('1')}`, (item) => {
                    console.log('item 1 changed', item);
                })
            );
            subs.push(
                state1.subscribe(`config.list.rows.${GSTCID('1')}`, (row) => {
                    console.log('row 1 changed', row);
                })
            );
        },
        onLoaded(gstc) {
            console.log('gstc loaded!', gstc);
            window.gstc = gstc; // you can console it out
            setTimeout(() => {
                const item1 = this.config.chart.items[GSTCID('1')];
                item1.label = 'label changed dynamically';
                item1.time.end += 2 * 24 * 60 * 60 * 1000;
                const row1 = this.config.list.rows[GSTCID('1')];
                row1.label = 'label changed dynamically';
            }, 4000);
        },
        // 甘特图设置结束，不知道为什么这么写，感觉没什么用，但是又不敢删除

        // 设置进度表甘特图
        setGSTC() {
            let columns = {
                data: {
                    nodeName: {
                        id: "nodeName",
                        data: "nodeName",
                        width: 120,
                        // expander: true, // 是否可以折叠
                        header: {
                            content: "节点名称"
                        }
                    },
                }
            }
            let rows = {}, items = {}
            this.scheduleData.map(d => {
                rows[d.nodeName] = {
                    id: d.nodeName,
                    nodeName: d.nodeName,
                }
                items[d.nodeName] = {
                    id: d.nodeName,
                    rowId: d.nodeName,
                    nodeName: d.nodeName,
                    label: d.nodeName, // 甘特图描述

                    // 设置时间，刚加载页面没有时间
                    time: {
                        start: d.startTime ? GSTC.api.date(d.startTime).valueOf() : '',
                        end: d.endTime ? GSTC.api.date(d.endTime).valueOf() + 1 * 24 * 60 * 60 * 1000 : GSTC.api.date(d.endTime).valueOf(), // 结束时间包含结束时间当天
                    },
                    // 默认红色
                    style: {  // 每个块的样式
                        background: d.nodeName === '总任务' ? 'rgb(0, 229, 181)' : 'rgb(45, 147, 250)'
                    }
                }
            })
            // 甘特图日期区间设置
            let chart = {
                from: this.scheduleData.length > 0 && this.scheduleData[0].startTime ? this.scheduleData[0].startTime : this.$moment(),
                to: this.scheduleData.length > 0 && this.scheduleData[0].endTime ? this.scheduleData[0].endTime : this.$moment().add(6, 'days')
            }
            this.config = gstcConfig.setConfig(columns, rows, items, chart)
        },

        // 设置任务列表甘特图
        setGSTCJob() {
            let columns = {
                data: {
                    jobName: {
                        id: "jobName",
                        data: "jobName",
                        width: 120,
                        // expander: true, // 是否可以折叠
                        header: {
                            content: "任务名称"
                        }
                    },
                }
            }
            let rows = {}, items = {}
            this.jobData.map(d => {
                rows[d.jobName] = {
                    id: d.jobName,
                    jobName: d.jobName,
                }
                items[d.jobName] = {
                    id: d.jobName,
                    rowId: d.jobName,
                    jobName: d.jobName,
                    // parentID: d.parentId,
                    label: d.jobName, // 甘特图描述
                    // 设置时间，刚加载页面没有时间
                    time: {
                        start: d.startTime ? GSTC.api.date(d.startTime).valueOf() : '',
                        end: d.endTime ? GSTC.api.date(d.endTime).valueOf() + 1 * 24 * 60 * 60 * 1000 : GSTC.api.date(d.endTime).valueOf(), // 结束时间包含结束时间当天
                    },
                    // 默认红色
                    style: {  // 每个块的样式
                        background: 'rgb(45, 147, 250)'
                    }
                }
            })
            // 甘特图日期区间设置
            let chart = {
                from: this.jobStartTime ? this.jobStartTime : this.$moment(),
                to: this.jobEndTime ? this.jobEndTime : this.$moment().add(6, 'days')
            }
            this.configjob = gstcConfig.setConfig(columns, rows, items, chart)
        },
    },

    beforeUnmount() {
        subs.forEach((unsub) => unsub());
    },
}
</script>

<style scoped>
.color-block-container {
    width: 10rem;
    text-align: left;
    display: flex;
    align-items: center;
}
/* 整体进度 */
.color-block-all {
    width: 3rem;
    height: 1rem;
    background: rgb(0, 229, 181);
    margin-left: 1rem;
}
/* 进行中 */
.color-block-ongoing {
    width: 3rem;
    height: 1rem;
    background: rgb(45, 147, 250);
    margin-left: 1rem;
}
/* 延期 */
.color-block-delay {
    width: 3rem;
    height: 1rem;
    background: rgb(255, 146, 40);
    margin-left: 1rem;
}
/* 已完成 */
.color-block-completed {
    width: 3rem;
    height: 1rem;
    background: rgb(204, 204, 204);
    margin-left: 1rem;
}
</style>